<script setup lang="ts">
import type { TagProps } from 'naive-ui'
import { cloneDeep } from 'lodash-es'

const defaultValue: any = {
  type: null,
}
const value = defineModel<string>('value', { default: null })

const model = ref<TagProps>({
})

watch(model, (v) => {
  value.value = JSON.stringify(v)
}, { deep: true })

watch(value, (v) => {
  try {
    model.value = JSON.parse(v)
  }
  catch {
    model.value = cloneDeep(defaultValue)
  }
}, { immediate: true })

const typeOptions: { label: string, value: TagProps['type'] }[] = [
  { label: '默认', value: 'default' },
  { label: '主要', value: 'primary' },
  { label: '成功', value: 'success' },
  { label: '信息', value: 'info' },
  { label: '警告', value: 'warning' },
  { label: '危险', value: 'error' },
]
</script>

<template>
  <n-grid>
    <n-form-item-gi :span="24" label="颜色值">
      <n-radio-group v-model:value="model.type">
        <n-radio v-for="item in typeOptions" :key="item.value" :value="item.value">
          <n-tag :type="item.value">
            {{ item.label }}
          </n-tag>
        </n-radio>
      </n-radio-group>
    </n-form-item-gi>
    <n-form-item-gi label="扩展属性" :span="24">
      <n-input v-model:value="value" type="textarea" placeholder="请输入扩展属性" />
    </n-form-item-gi>
  </n-grid>
</template>

<style scoped>
:deep(.n-radio) {
  align-items: center;
}
</style>
